<template>
	<div class="officeComplaint">
		<div class="title">
			<p>康恒医院医生投诉信息</p>
		</div>
		
		<el-table :data="table" height="480" border style="width: 100%">
			<el-table-column prop="id" label="编号" width="180">
			</el-table-column>
			<el-table-column prop="complainant" label="投诉者" width="180">
			</el-table-column>
			<el-table-column prop="type" label="投诉类型" width="180">
			</el-table-column>
			<el-table-column prop="date" label="投诉时间">
			</el-table-column>
			<el-table-column prop="content" label="投诉内容">
			</el-table-column>
			<el-table-column prop="reply" label="医生回复">
			</el-table-column>
			<el-table-column prop="phone" label="联系方式">
			</el-table-column>
			<el-table-column align="center" label="操作">
				<template scope="scope">
					<el-button size="small" @click="edictDoctor(scope.$index)">回复</el-button>
					<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<el-dialog title="回复" :visible.sync="dialogVisible" size="tiny">
			<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script type="text/ecmascript-6">
	import Vue from 'vue';
	import {
		debounce
	} from 'lodash';
	import {
		api
	} from '../../../global/api.js';
	export default {
		data() {
			return {
				table: [],
				tableEdit: [],
				Index: '',
				dialogVisible: false,
				textarea: ''
			};
		},
		methods: {
			handleDelete(index, row) {
				let that = this;
				this.$confirm('此操作将删除该投诉信息, 是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//删除此投诉
					let API = "http://localhost:8088/deleteComplaintpatient";
					that.$http.post(API, that.table[index].id).then((response) => {
						// 从 that.table 数组中移除该项
						that.table.splice(index, 1);
						that.$message({
							message: '投诉信息删除成功',
							type: 'success'
						});
					}).catch((error) => {
						that.$message.error('投诉信息删除失败');
					});
				}).catch(() => {
					that.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			edictDoctor(index) {
				let that = this;
				that.Index = index; // 存放当前行的序号
				this.dialogVisible = true;   //选区=true
			},
			submit() {
				let that = this;
				that.table[that.Index].reply = this.textarea;
				//回复投诉信息
				let API = "http://localhost:8088/updateComplaintpatient";
				that.$http.post(API, that.table[that.Index]).then(function() {
					that.dialogVisible = false;

					this.$message({
						message: '已回复',
						type: 'success'
					});
				}, function() {
					this.$message.error('回复失败');
				});
			}
		},
		created() {
			//查询医生所有投诉
			let ARI = "http://localhost:8088/getComplaintpatient";
			this.$http.get(ARI).then((response) => {
				for (var i = 0; i < response.body.data.Complaintpatient.length; i++) {
					const dateString = response.body.data.Complaintpatient[i].date;
					const date = new Date(dateString);

					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
					const day = String(date.getDate()).padStart(2, '0');

					const formattedDate = `${year}-${month}-${day}`;

					response.body.data.Complaintpatient[i].date = formattedDate;
				}

				this.table = response.body.data.Complaintpatient;
				console.log(this.table);
			}, response => {
				// error callback
				this.$message({
					message: '数据请求失败',
					type: 'error'
				});
			});
		}
	};
</script>

<style>
	.officeComplaint .title p {
		font-size: 24px;
		text-align: center;
		margin-bottom: 50px;
	}
</style>